import React, { useEffect, useState, memo } from 'react';
import moment from 'moment';
import styles from './index.less';

function NowTime() {
  const [date, setDate] = useState('');
  const [week, setWeek] = useState('');
  const [time, setTime] = useState('');
  const getTime = () => {
    setDate(moment().format('YYYY.MM.DD'));
    setWeek(moment().format('dddd'));
    setTime(moment().local().format('HH:mm:ss'));
  };

  useEffect(() => {
    moment.locale('zh-cn', {
      weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
    });
    getTime();
    const now_time = setInterval(() => {
      getTime();
    }, 1000);
    return () => {
      clearInterval(now_time);
    };
  }, []);

  return (
    <div className={styles.clockWrap}>
      <div className={styles.din}>{date}</div>
      <div className={styles.splitLine} />
      <div>{week}</div>
      <div className={styles.splitLine} />
      <div className={styles.din}>{time}</div>
    </div>
  );
}
export default memo(NowTime);
